<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="activeTab">
      <van-tabbar-item replace icon="search" to="/findPost">寻人寻物</van-tabbar-item>
      <van-tabbar-item replace icon="user-o" to="/personalCenter">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const activeTab = ref(0);

const updateActiveTab = () => {
  if (route.path === '/findPost') {
    activeTab.value = 0;
  } else if (route.path === '/personalCenter') {
    activeTab.value = 1;
  }
};

updateActiveTab();

watch(() => route.path, updateActiveTab);
</script>

<style scoped></style>
